//背景
var exports = {};

var Slider = require("./../utils/Slider.js");

var element = null;

var panel = $("#bgPanel");
var maxMargin = 200;
var vslider;
var hslider;

exports.init = function() {
	panel.find(".icon-guanbi").on("click", function() {
		exports.unbind();
	});

	hslider = new Slider("#spacingHSlider");
	hslider.on("update", function(e, bili) {
		if(element) {
			element.marginy = bili / 100 * maxMargin;
		}
	});

	vslider = new Slider("#spacingVSlider");
	vslider.on("update", function(e, bili) {
		element.marginx = bili / 100 * maxMargin;
	});

	panel.find(".text-setting-operate").find("i").on("click", function() {
		panel.find(".text-setting-operate").find("i").removeClass("active");
		var type = $(this).addClass("active").data("repeat");
		element.repeat = type;
	});
}

exports.bind = function($ele) {
	element = $ele;
	$(panel).css("transform", "translateX(0)");
	$(panel).css("opacity", "1");

	//是否平铺
	var repeatis = panel.find(".text-setting-operate").find("i");
	repeatis.removeClass("active");
	if(element.repeat) {
		repeatis.eq(1).addClass("active");
	} else {
		repeatis.eq(0).addClass("active");
	}

	//空隙
	var bili = element.marginx / maxMargin * 100;
	vslider.setBili(bili);

	var bili = element.marginy / maxMargin * 100;
	hslider.setBili(bili);
}

exports.unbind = function() {
	element = null;
	$(panel).css("transform", "translateX(320px)");
	$(panel).css("opacity", "0");
}

module.exports = exports;